<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<c-header>
			<view class="header" slot="header">
				<view class="title">通讯录</view> 
			</view>
		</c-header>
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-form">
					<view class="icon iconfont f-s44">&#xe622;</view>
					<input type="text" v-model="keyword" class="sc-inp" @confirm="search">
					<view v-if="keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
				</view> 	
			</view>
		</view>
		<view v-if="isLogin" class="body">
			<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
			
			<template v-else>
				<template v-if="list.length>0">
					<view class="mail-list">						
						<template >
							<view v-for="(item,index) in list" :key="index" @click="call(item.mobile_number)">
								<view class="group-name">{{item.department_name}}</view>
								<view class="item" v-for="(subitem,subindex) in item.ulist" :key="subindex">
									<view class="icon">{{subitem.username|substringUsername(subitem.username)}}</view>
									<view class="content">
										<view class="name">{{subitem.username}}</view> 
										<!-- <view class="job">{{subitem.job_name}}</view> -->
									</view>
									
								</view> 
							</view>
						</template>
					</view>
					<c-loading :loadingState="loadingState"></c-loading>
				</template>
				
				<c-empty v-else></c-empty>
			</template>
		</view> 
		
		<c-nav-index :switchTab="4"></c-nav-index>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				isIphoneX:getApp().globalData.isIphoneX,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				isSearchData:false,
				list:[],
				keyword:'',
				page:1,
				
			}
		},
		filters:{
			substringUsername(val){ 
				if(val) return val.substring(val.length-2);			    
			},
		},
		onLoad() {
			this.isLogin=this.$loginState('check');
			if(this.isLogin){ 
				this.getList();
			}
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.page=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.page++;  
					this.getList(); 
				} 
			}	 
		},
		methods: {
			// 获取用户列表
			async getList() {
				let res = await this.$api.user_api.userListBydep({ 
					keywords: this.keyword,
					department_id:''
				})   
				console.log(res.data.data)
				if (res.data.code == 200) {
					this.loadingState.default=false;
					res.data.data.forEach(item=>{
						item.ulist.forEach(subitem=>{
							subitem.checked=false;
						})
					})
					this.list=res.data.data;  
					
				}
			},
			
			call(phone){ 
				uni.makePhoneCall({
					phoneNumber: phone 
				});
			},
			
			search(){
				this.list=[]; 
				this.page=1;
				this.loadingState.default=true;
				this.getList(); 
			},
			
			clearKeyword(){
				this.list=[];
				this.keyword='';
				this.page=1;
				this.loadingState.default=true;
				this.getList(); 
			}
		}
	}
</script>

<style lang="less">
	.page{
		 
	} 
	.mail-list{ 
		background: #fff;
		.group-name{
			padding:0 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #f5f5f5;
			font-size: 30rpx;
			font-weight: bold;
		}
		.item{
			display: flex;
			align-items: center;
			padding:0 0 0 20rpx;
			.icon{
				width: 70rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
				background: #09f;
				border-radius: 15rpx;
				font-size: 28rpx;
				color:#fff
			}
			.content{
				flex-grow: 2; 
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				padding:30rpx 20rpx 30rpx 0;
				.name{
					font-size: 30rpx;
				}
				.job{
					color:#999;
					font-size: 28rpx;
				} 
			}
		}
	} 
</style>
